<template>
   <div class="bordercontents6" :ref="ref">
        <svg class="dv-border-svg-container" :width="width" :height="height"> 
            <defs>
                <filter id="filterId" height="150%" width="150%" x="-25%" y="-25%">
                  <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
                  <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
                  <feFlood flood-color="#66bfeb" result="glowColor" />
                  <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
                  <feMerge>
                    <feMergeNode in="softGlowColored"/>
                    <feMergeNode in="SourceGraphic"/>
                  </feMerge>
                </filter>
              </defs>         
            <polyline class="dv-bb7-line-width-2"  points="2, 10 10, 2"
            /> 
            <polyline :class="['dv-bb7-line-width-3',transfroms?'dot':'']" :filter="filter?'url(#filterId)':''"   :points="`2,20 20,2 ${width-2},2 ${width-2},10 ${width-2},${height-20} ${width-2},${height-20} ${width-20},${height-2} 10,${height-2} 2 ,${height-2} 2,20`"
           style=" stroke-opacity: 0.5"
           /> 
            <!-- y,x -->
            <!-- 起始位置,点(y,x),...,结束位置 -->
            <!-- w:100,h:100 -->
         
            <!-- 右下 -->
            <polyline class="dv-bb7-line-width-2" :points="`${width-2},${height-10} ${width-10},${height-2}`"
            style="fill:none;"/> 
           <polyline class="dv-bb7-line-width-5" :points="`${width-60},2 ${width-2}, 2 ${width-2},20 `"
            style="fill:none;stroke-opacity: 1"/> 
                <!-- 左下 -->
            <polyline class="dv-bb7-line-width-5" :points="`${width/6},${height-2} 2 ,${height-2} 2, ${height-20}`"
            style="fill:none;stroke-opacity: 1"/> 
       </svg>
       <div class="echartCon">
            <div>
                <slot></slot>
            </div>
       </div>
    </div>
</template>

<script>
import autoMinix from "../autoResize";
import {defineComponent,toRaw} from "vue-demi";

export default defineComponent({
  name: "VDorderLine6",
  mixins: [autoMinix],
  props:{
       transfroms:{
            type:Boolean,
            default:()=>false
       },
       filter:{
         type:Boolean,
            default:()=>true
       } 
  },
  data(){
     return {
       ref:'VDorderLine7',
     }
  }, 
  setup(){
    let ref = "vborder6"; 
    return {
      ref
    };
  },
});
</script>

<style lang="less" scoped>
   .dv-border-svg-container > polyline {
        
        stroke-linecap: round;
        }
        .dv-bb7-line-width-2 {
        stroke-width: 2;
        stroke:#66bfeb;
      
        } 
        .dv-bb7-line-width-3 {
        stroke-width: 1;
        stroke:#76acc4;
        fill: none;
        } 
          .dv-bb7-line-width-5 {
        stroke-width: 2;
        stroke:#76acc4;
        fill: none;
        } 
     .bordercontents6{
            position: relative;
            width: 100%;
            height: 100%;
     }  
     .dv-border-svg-container{
            position: absolute;
            top: 0;
            left: 0;
     }   
     .echartCon{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: .5rem .5rem;
            box-sizing: border-box;
            &>div{
              
            }
            
     } 
     .echartCon>div{
          width: 100%;
          height: 100%;
          /* box-shadow: inset 0 0 40px rgba(8, 230, 238, 0.63); */
     }
     .dot{
        stroke-dashoffset: 100;
        /* 偏移量，整数是靠左边，负数是靠右边 */
        /* -webkit-transition: all .9s cubic-bezier(.19,1,.22,1);
        transition: all 2.9s cubic-bezier(.19,1,.22,1); */
        stroke-dasharray:300; 
        animation: dots 5s linear infinite; 
     }
     @keyframes dots {
         0%{
            stroke-dashoffset: 300; 
         }100%{
            stroke-dashoffset: 1500;
         }
     }
</style>